<template>
  <div class="box">
    <div class="header">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()"/>
      </template>
      <template #action>
        <div @click="onSearch" class="search">搜索</div>
      </template>
    </van-search>
    </div>
    <div class="content">
        <div class="noShop" v-if="empty">
          <van-empty
            image="search"
            description="暂未找到相关商品">
          </van-empty>
        </div>
        <div v-else>
          <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" @change="salesSort"/>
              <van-dropdown-item v-model="value2" :options="option2" @change="priceSolt"/>
              <van-dropdown-item title="价格筛选" ref="item">
                  <van-cell>
                  <van-col span="12">
                    <van-field v-model="minValue" placeholder="最低价" />
                  </van-col>
                  <van-col span="12">
                    <van-field v-model="maxValue" placeholder="最高价" />
                  </van-col>
                  </van-cell>
                  <div style="padding: 5px 16px;">
                  <van-button type="danger" block round @click="priceRange">
                      确认
                  </van-button>
                  </div>
              </van-dropdown-item>
          </van-dropdown-menu>
          <van-card
              @click="toDetail(item.proid)"
              v-for="item of list"
              :key="item.proid"
              :num="item.sales"
              :price="item.originprice"
              :desc="item.desc"
              :title="item.proname"
              :thumb="item.img1"
          />
        </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, Icon, Card, DropdownMenu, DropdownItem, Cell, Switch, Button, Toast, Col, Field, Empty } from 'vant'
import { getsearch, getCategorybrandprolist } from '@/api/search'

Vue.use(Search)
Vue.use(Icon)
Vue.use(Card)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Cell)
Vue.use(Switch)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Col)
Vue.use(Field)
Vue.use(Empty)
export default {
  data () {
    return {
      keyword: '',
      maxValue: '',
      minValue: '',
      list: [],
      value1: 1,
      value2: 1,
      option1: [
        { text: '默认销量', value: 1 },
        { text: '销量最低', value: 2 },
        { text: '销量最高', value: 3 }
      ],
      option2: [
        { text: '默认排序', value: 1 },
        { text: '价格最低', value: 2 },
        { text: '价格最高', value: 3 }
      ],
      switch1: false,
      switch2: false,
      readyList: [],
      brand: '',
      category: '',
      empty: ''
    }
  },
  mounted () {
    // 根据路由参数判断数据显示列表
    if (this.$route.query.keyword) {
      this.keyword = this.$route.query.keyword
      this.getsearch()
    } else {
      this.brand = this.$route.query.brand
      this.category = this.$route.query.category
      this.keyword = this.brand + ' ' + this.category
      this.getCategorybrandprolist()
    }
  },
  methods: {
    async getsearch () {
      if (this.keyword) {
        var res = await getsearch({
          keyword: this.keyword
        })
        if (res.data.code === '10002') {
          Toast('暂未找到相关商品')
          this.localSave(res)
          this.empty = true
        } else {
          this.list = res.data.data
          this.readyList = JSON.parse(JSON.stringify(res.data.data))
          this.localSave(res)
        }
      } else {
        Toast('搜索框为空')
      }
    },
    async getCategorybrandprolist () {
      var res = await getCategorybrandprolist({
        brand: this.brand,
        category: this.category
      })
      if (res.data.code === '200') {
        if (res.data.data.length === 0) {
          Toast('暂未找到相关商品')
          this.empty = true
        } else {
          this.list = res.data.data
          this.readyList = JSON.parse(JSON.stringify(res.data.data))
        }
        this.localSave(res)
      }
    },
    localSave (res) {
      this.empty = false
      var standbyList = JSON.parse(localStorage.getItem('search')) || []
      var index = standbyList.indexOf(this.keyword)
      if (index > -1) {
        standbyList.splice(index, 1)
      }
      standbyList.unshift(this.keyword)
      localStorage.setItem('search', JSON.stringify(standbyList))
    },
    onSearch () {
      this.getsearch()
    },
    onConfirm () {
      this.$refs.item.toggle()
    },
    toDetail (proid) {
      this.$router.push({ name: 'detail', params: { proid } })
    },
    // 价格排序
    priceSolt (value) {
      if (value === 1) {
        this.list = JSON.parse(JSON.stringify(this.readyList))
      } else if (value === 2) {
        this.list.sort((a, b) => {
          return a.originprice - b.originprice
        })
      } else if (value === 3) {
        this.list.sort((a, b) => {
          return b.originprice - a.originprice
        })
      } else {}
    },
    // 销量排序
    salesSort (value) {
      if (value === 1) {
        this.list = JSON.parse(JSON.stringify(this.readyList))
      } else if (value === 2) {
        this.list.sort((a, b) => {
          return a.sales - b.sales
        })
      } else if (value === 3) {
        this.list.sort((a, b) => {
          return b.sales - a.sales
        })
      } else {}
    },
    // 价格筛选
    priceRange () {
      if (!this.minValue) {
        Toast('请输入最小值')
      } else if (!this.maxValue) {
        Toast('请输入最大值')
      } else {
        this.$refs.item.toggle()
        this.list = JSON.parse(JSON.stringify(this.readyList)).filter(item => {
          if (item.originprice >= this.minValue && item.originprice <= this.maxValue) {
            return item
          }
        })
        if (this.list.length === 0) {
          Toast('没有合适商品')
          this.getsearch()
        }
      }
      this.minValue = ''
      this.maxValue = ''
    }
  }
}
</script>
<style lang="stylus" scoped>
.van-search
  padding 5px 12px
.van-search__content
  margin-left 12px
.search
  display: inline-block
  background-color: #E93B3D
  height: 30px
  width: 50px
  text-align: center
  line-height: 30px
  border-radius: 5px
  color: #fff
  margin-left: 25px
.noShop
 display flex
 justify-content center
 align-items center
</style>
